<template>
  <div>
    <Frame
      class="frame"
      flexType="flex"
      size="small-2"
      title="提示"
      content2="content2"
      :visible="dialogVisible"
    >
      <template #default>
        <div class="content">
          {{ bindingName }}
        </div>
      </template>
      <template #footer>
        <div class="footer-btns">
          <el-button size="small" @click="closeDialog">取消</el-button>
          <el-button size="small" @click="submit" v-preventReClick="1000"
            >确认</el-button
          >
        </div>
      </template>
    </Frame>
  </div>
</template>

<script>
import { reqBindingCamera, reqUnbindingCamera } from "@api/api.js";
import { mapState } from "vuex";
import Frame from "./frame.vue";

export default {
  props: ["cameraCode", "bindingName", "bindingState","deviceList"],
  components: { Frame },
  data() {
    return {
      dialogVisible: false,
    };
  },
  watch: {},
  computed: {
    ...mapState(["user"]),
  },
  mounted() {},
  methods: {
    // 点击绑定
    async submit() {
      if (this.bindingState == "1") {
        let res = await reqBindingCamera({
          cameraCode: this.cameraCode,
          id: this.deviceList.id,
        });
        if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
        this.$modal.notifySuccess("绑定成功");
        this.closeDialog()
      this.$parent.closeBinding(true)
      } else if (this.bindingState == "2") {
        let res = await reqUnbindingCamera(this.deviceList.id);
        if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
        this.$modal.notifySuccess("解除成功");
        this.closeDialog()
      this.$parent.closeBinding(false)
      }
    },

    // 点击关闭弹框
    closeDialog() {
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../../../../views/common.less");

.footer-btns {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.content {
  color: #fff;
  padding: 0 8vw;
}
</style>
